<template>
    <!-- 查看路口弹窗 -->
    <div>
        <el-dialog
            title="新增反馈"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
            center
        >
            <el-form ref="form" :model="intersectionData" label-width="100px">
                <el-form-item label="反馈内容">
                    <el-input v-model="intersectionData.problemDescription" placeholder="请输入反馈内容" maxlength="200" type="textarea"></el-input>
                </el-form-item>
                <!-- 取消/新增按钮 -->
                 <div class="dialog-footer">
                    <el-button @click="handleClose()">取消</el-button>
                    <el-button v-loading.lock="loading" style="margin-left: 40px" type="primary" @click="bindSave">新增</el-button>
                 </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import { insertTmUserFeedback } from '@/api/tm-road'

    export default {
        data(){
            return {
                dialogVisible: false,
                loading: false,
                intersectionData: {
                    problemDescription: ''
                },
            }
        },
        methods: {
            open(){
                this.intersectionData = {
                    problemDescription: ''
                }
                this.dialogVisible = true
            },
            handleClose(){
                this.dialogVisible = false
            },
            async bindSave(){
                if (!this.intersectionData.problemDescription) {
                    this.$message.error('反馈内容不能为空')
                    return
                }
                this.loading = true;
                const { code = undefined } = await insertTmUserFeedback({ problemDescription: this.intersectionData.problemDescription })
                if (code === 200) {
                    this.$message.success('反馈成功')
                    this.$emit('refreshIntersectionData')
                    this.handleClose()
                } else {
                    this.$message.error('反馈失败')
                }
                this.loading = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: center;
    margin-top: 20px;
}
</style>